<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import {
    getInsuranceLog,
    personOrderShow,
    postChangeInsurance
  } from '@/api/training'
  import uploadImage from '@/components/uploadImage/index.vue'
  import { msg } from '@/utils/tools'
  const bottomPadding = (uni.getSystemInfoSync().screenHeight as number) - (uni.getSystemInfoSync().safeArea.bottom as number)
  let orderId = 0
  const insuranceFile = ref([])
  const insuranceLogList = ref([])
  const orderInfo = ref({
    id:0,
    insurancePayFile:[]
  })
  onLoad((options:any) => {
    orderId = options.id
    getOrderInfo()
    getAuditLog()
  })

  const getAuditLog = () => {
    getInsuranceLog({id:orderId}).then(res => {
      if(res.code == 200){
        insuranceLogList.value = res.data
      }
    })
  }

  const getOrderInfo = () => {
    personOrderShow({id:orderId}).then(res => {
      if(res.code == 200){
        orderInfo.value = JSON.parse(JSON.stringify(res.data))
        orderInfo.value.insurancePayFile = orderInfo.value.insurancePayFile ? JSON.parse(orderInfo.value.insurancePayFile) : []
        insuranceFile.value = orderInfo.value.insurancePayFile.map((item:any) => {
          return {
            status: 'success',
            message: '',
            url: item.fullUrl,
            originalUrl:item.url,
            id:item.id,
            name:item.name,
            fullUrl:item.fullUrl
          }
        })
      }
    })
  }

  const submit = () => {
    if(insuranceFile.value.length == 0){
      msg('请上传保险附件证明材料',false)
      return false
    }
    const insuranceFileString = insuranceFile.value.map(item => {
      return {
        fullUrl:item.fullUrl,
        id:item.id,
        name:item.name,
        thumb_url:item.thumb_url,
        url:item.originalUrl
      }
    })
    const params = {
      id:orderInfo.value.id,
      insuranceFile:JSON.stringify(insuranceFileString)
    }
    postChangeInsurance(params).then(res => {
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2];
      uni.navigateBack({
        delta:1,
        success:() => {
          // #ifndef H5
          prevPage?.$vm?.reload()
          // #endif
          // #ifdef H5
          prevPage.$.setupState.reload()
          // #endif
        }
      })
    })
  }
</script>

<template>
  <view class="order-body">
    <xx-title title="保险证明修改"/>
    <view class="insurance">
      <view class="title">保险附件证明</view>
      <view class="insurance-file">
        <upload-image :maxCount="1" v-model="insuranceFile"/>
      </view>
    </view>

    <view class="insurance">
      <view class="title">审核日志</view>
      <view class="insurance-file">
        <up-steps :current="insuranceLogList.length -1" direction="column" dot v-if="insuranceLogList.length > 0">
          <up-steps-item v-for="(item,index) in insuranceLogList" :key="index" :title="`${item.insuranceAuditEnumDesc}`">
            <template #icon>
              <up-icon :name="index === insuranceLogList.length -1 ?'close-circle-fill':'checkmark-circle-fill'" size="16" :color="index === insuranceLogList.length -1?'#CC0000':'#1B7ADD'"></up-icon>
            </template>
            <template #desc>
              <view class="desc-content">{{item.content}}</view>
              <view class="desc-time">{{item.createdTime}}</view>
            </template>
          </up-steps-item>
        </up-steps>
        <up-empty v-else mode="message" iconSize="40"/>
      </view>
    </view>


    <view class="bottom-fixed" :style="{paddingBottom:`calc(${bottomPadding}px + 14rpx)`}">
      <view class="seizeASeat"></view>
    </view>
    <view class="bottom-btn" :style="{paddingBottom:`calc(${bottomPadding}px + 14rpx)`}">
      <view class="btn group-registration" @click="submit">提交审核</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .order-body{
    width: 100%;
    box-sizing: border-box;
    padding: 1rpx;
    background-color: #F5F5F5;
    min-height: 100vh;
  }
  .bottom-fixed{
    padding-top: 14px;
    background-color: #F5F5F5;
    .seizeASeat{
      height: 60rpx;
    }
  }
  .bottom-btn{
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 28rpx;
    padding-right: 28rpx;
    box-sizing: border-box;
    padding-top: 14rpx;
    background-color: #FFFFFF;
    .btn{
      padding: 16rpx 32rpx;
      margin-right:10rpx;
      text-align: center;
      border-radius: 100rpx;
      box-sizing: border-box;
      border:1rpx solid #92C75B;
      font-size: 28rpx;
      font-weight: 500;
      letter-spacing: 2rpx;
      &:last-child{
        margin-right: 0;
      }
    }
    .group-registration{
      width: 100%;
      background: #92C75B;
      color: #FFFFFF;
    }

  }
  .insurance{
    margin:28rpx;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 32rpx;
    .title{
      font-size: 32rpx;
      color: #21252E;
      display: flex;
      align-items: center;
      padding-bottom: 14rpx;
      border-bottom: 1rpx solid #EBEBEB;
      &:before{
        content: '*';
        color: #f34848;
      }
    }
    .insurance-file{
      padding-top: 14rpx;
    }
  }
  .desc-content{
    font-size: 26rpx;
    color: #464646;
    margin: 10rpx 0;
  }
  .desc-time{
    font-size: 23rpx;
    color: #464646;
  }
  ::v-deep .u-steps-item__content{
    background-color: #f3f3f3;
    padding: 10rpx;
    border-radius: 10rpx;
    .u-text__value--main{
      color: #CC0000;
    }
  }
</style>
